<template>
  <div class="MyView">
    <!-- 顶部导航 -->
    <van-nav-bar title="我的" right-text="退出登录" @click-right="LogOut" />
    <!-- 用户信息 -->
    <div class="userContent">
      <div class="user-img">
        <van-uploader v-show="headUpdate" :after-read="afterRead" />
        <img v-show="!headUpdate" :src="userImg" alt="" />
      </div>
      <p>手机号:{{ userComtent?.user }}</p>
    </div>

    <!-- 浏览记录 -->

    <div class="historyRecord-box">
      <p>浏览记录</p>
      <div v-for="(item, index) in historyRecord" :key="index">
        <img :src="item.background_img" alt="" />
        <div class="historyRecord-box-text">
          <p>{{ item.author }}</p>
          <p>{{ item.title }}</p>
          <p>{{ item.subtitle }}</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "MyView",
  data() {
    return {
      // 用户信息
      userComtent: {},
      // 控制
      headUpdate: true,
      userImg: "",
      // 本地浏览记录
      historyRecord: [],
    };
  },
  mounted() {
    // 查找本地存储
    this.userComtent = JSON.parse(localStorage.getItem("user"));
    this.userImg = localStorage.getItem("userImg");
    this.historyRecord = JSON.parse(localStorage.getItem("BookList"));
    // console.log(this.historyRecord);
    // 判断本地有没有存储 有就显示头像
    if (this.userImg) {
      this.headUpdate = false;
    }
  },
  methods: {
    // 头像上传
    afterRead(file) {
      if (file.content) {
        localStorage.setItem("userImg", file.content);
        this.userImg = file.content;
        this.headUpdate = false;
      }
    },
    // 退出登录
    LogOut() {
      localStorage.removeItem("user");
      this.$router.go(0);
    },
  },
  // 路由守卫判断是否进入页面
  beforeRouteEnter(to, from, next) {
    next((vm) => {
      if (!localStorage.getItem("user")) {
        vm.$toast({
          message: "还没登录呢",
          type: "fail",
        });
        // console.log(111);
        next({
          path: "/LoginAndEgistration",
          query: {
            netxUrl: to.fullPath,
          },
        });
      } else {
        next();
      }
    });
  },
};
</script>

<style lang="scss" >
.MyView {
  height: 100%;
  box-sizing: border-box;
  // 导航退出栏
  .van-nav-bar {
    .van-nav-bar__right {
      .van-nav-bar__text {
        color: black;
      }
    }
  }
  .userContent {
    text-align: center;
    // position: relative;
    .user-img {
      img {
        width: 6.25rem;
        height: 6.25rem;
        border-radius: 50%;
      }
    }
  }
  .historyRecord-box {
    padding: 0.625rem 0.875rem 3.125rem;
    > div {
      display: flex;
      margin: 0.625rem 0;
      img {
        width: 5.625rem;
        height: 7.5rem;
      }
      .historyRecord-box-text {
        margin-left: 0.625rem;
        font-size: 0.8125rem;
        color: var(--fontcolor);

        p:nth-child(1) {
        }
        p:nth-child(2) {
          color: black;
          font-size: 1rem;
          margin: 0.625rem 0;
        }
        p:nth-child(3) {
        }
      }
    }
  }

  // 退出
  .LogOut-btn {
    position: absolute;
    top: 0.625rem;
    right: 0.625rem;
    padding: 0.625rem;
    border: 1px solid #ccc;
  }
}
</style>